<template>
    <div class="dropDownContainer">
        <el-dropdown :style="execDropdownClass"
                     :placement="propJson.placement"
                     :trigger="propJson.trigger"
                     :hideOnClick="propJson.hideOnClick"
                     :info="avatarUrlValue"
                     @command="handleCommand">

            <el-avatar v-if="avatarUrlInfo !== ''" :size="propJson.avatarSize" :src="avatarUrlInfo"
                       :shape="propJson.avatarShape" :fit="propJson.avatarFit" class="avatarClass"/>
            <el-avatar v-if="avatarUrlInfo === ''" class="avatarClass">Avatar</el-avatar>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="item in propJson.dropDownValueList" :key="item.command"
                                      :command="item.command" :disabled="item.dropDownDisable">
                        {{item.value}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts" name="AvatarDropDownComponent">
import {computed, defineProps, ref} from "vue";
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let avatarUrlInfo = ref("")

let avatarUrlValue = computed(() => {
    doGetUrlValue()
})

let execDropdownClass = computed(() => {
    let resStyle = "width: 100%;"
    resStyle += "height: 100%;";
    return resStyle;
})

async function handleCommand(command) {
    // 遍历查询所有下拉列表
    for (let i = 0; i < propJson.value.dropDownValueList.length; i++) {
        let itemInfo = propJson.value.dropDownValueList[i];
        if (command === itemInfo.command) {
            // 判断当前是否开启了选择点击事件
            if (!itemInfo.isAddClickAction) {
                return;
            }
            let itemActionList = itemInfo.clickAction
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(itemActionList, awaitObj, commonParam.value, () => {}, ()=>{}, null);
            // 处理完成之后直接返回
            return;
        }
    }
}

function execThen(resValue) {
    if (!resValue && propJson.value.editFlag) {
        avatarUrlInfo.value = ""
    } else {
        avatarUrlInfo.value = resValue
    }
}

async function doGetUrlValue() {
    await doThirdServiceValue(propJson.value.avatarUrlInfo, commonParam.value, execThen, () => {}, null)
}
</script>

<style scoped lang="less">
.dropDownContainer {
    height: 100%;
}

.avatarClass:hover {
    cursor: pointer;
}
</style>